<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            background-color: #ccc;

        }
      div{
        width: 600px;
        height: 500px;
        /*background-color: #d84747;*/
        text-align: center;
        margin: 0 auto;
      }
        .p1{
          text-indent: 2em;
          text-align: left;
        }
      .p2{
        text-indent: 2em;
        text-align: left;
        font-style: italic;
      }
      input{
        width: 400px;
        height: 30px;
        border: 1px solid #ccc;
      }
      .p3{
        width: 1em;
      }
    </style>
</head>
<body>
<div class="box" >
<h1>文本样式高级控制</h1>
<p class="p1">网页设计中，文本样式的精细控制是提升用户体验的关键因素。通过CSS我们可以实现各种专业的排版效果。</p>
  <p class="p1">从基本的字体、字号设置到复杂的首字下沉、文本阴影等效果，CSS提供了丰富的属性来控制文本表现。</p>
  <p class="p2">好的排版是无声的音乐，它不引⼈注⽬却让阅读变得轻松愉悦。在数字时代，CSS是我们实现优美排版的强⼤⼯具。</p>
  <label>
  <input type="text" value="这是⼀个⾮常⻓的⽂本内容，当它超出容器宽度时会⾃动显示为省略号，⽽不是换⾏或者溢出容器">
  </label>
  <p class="p3">竖向排列的⽂字效果</p>
  <p class="p1">通过组合使⽤各种CSS属性，我们可以创造出既美观⼜实⽤的⽂本布局，满⾜不同场景下的设计需求</p>
</div>
</body>
</html>